<template>
  <div class="ibox-content col-lg-12" style="margin-bottom: 10px;">
    <div id="reportrange" class="form-control">
      <label class="col-form-label mr-1">时间段：</label>
      <i class="fa fa-calendar"></i>
      <span ref="dateShow" id="daterange"></span>
      <b class="caret mr-4"></b>
      <!-- <br> -->
      <label v-if="droplist1" class="col-form-label mr-1">{{ droplist1.title }}：</label>
      <select
        v-if="droplist1"
        ref="select1"
        name="branch"
        id="branch_select"
        class="mr-4"
        @change="search()"
      >
        <option value="all">所有</option>
        <option :value="value" v-bind:key="value" v-for="value in droplist1.data">{{value}}</option>
      </select>
      <!-- <label v-if="droplist2" class="col-form-label mr-1">{{ droplist2.title }}：</label>
      <select
        v-if="droplist2"
        ref="select2"
        name="buildtype"
        id="buildtype_select"
        class="mr-4"
        @change="search()"
      >
        <option value="all">所有</option>
        <option :value="value[1]" v-bind:key="value[1]" v-for="value in droplist2.data">{{value[0]}}</option>
      </select> -->
      <button id="datepicker" class="btn btn-sm btn-primary" value="Search" v-on:click="search">
        搜索
        <span id="searching" style="visibility:hidden;"></span>
      </button>
    </div>
  </div>
</template>

<script>
export default {
	name: 'dateSelect',
	props: {
		droplist1: [Array, Object],
		// droplist2: [Array, Object]
	},
	data: () => {
		return {
			dateChange: '',
			select1: 'all',
			select2: 'all'
		};
	},
	methods: {
		search: function() {
			// console.log("search.")
			this.dateChange = this.$refs.dateShow.innerText;
			this.select1 = this.$refs.select1.value;
			// if (this.droplist2) {
			// 	this.select2 = this.$refs.select2.value;
			// 	this.$emit('search', this.dateChange, this.select1, this.select2);
			// } else {
			this.$emit('search', this.dateChange, this.select1);
			// }
		}
	},
	mounted: function() {
		// /* eslint-disable */
		$('#daterange').html(
			moment()
				.subtract(6, 'days')
				.format('YYYY-MM-DD') +
				' - ' +
				moment().format('YYYY-MM-DD')
		);
		// $('#daterange').html('2018-08-01 - 2018-08-31');
		// this.dateChange = moment().subtract(6, 'days').format('YYYY-MM-DD')+' - '+moment().format('YYYY-MM-DD');
		/* Initial the load data base on the date picker value, default last 15 days */
		var self = this;
		$('#daterange').daterangepicker(
			{
				format: 'YYYY-MM-DD',
				startDate: moment().subtract(6, 'days'),
				endDate: moment(),
				minDate: '1990-01-01',
				maxDate: '2099-12-31',
				dateLimit: { days: 99999 },
				showDropdowns: true,
				showWeekNumbers: true,
				timePicker: false,
				timePickerIncrement: 1,
				timePicker12Hour: true,
				ranges: {
					Today: [moment(), moment()],
					Yesterday: [
						moment().subtract(1, 'days'),
						moment().subtract(1, 'days')
					],
					'Last 7 Days': [moment().subtract(6, 'days'), moment()],
					'Last 30 Days': [moment().subtract(29, 'days'), moment()],
					'This Month': [moment().startOf('month'), moment().endOf('month')],
					'Last Month': [
						moment()
							.subtract(1, 'month')
							.startOf('month'),
						moment()
							.subtract(1, 'month')
							.endOf('month')
					]
				},
				opens: 'right',
				drops: 'down',
				buttonClasses: ['btn', 'btn-sm'],
				applyClass: 'btn-primary',
				cancelClass: 'btn-default',
				separator: ' to ',
				locale: {
					applyLabel: 'Submit',
					cancelLabel: 'Cancel',
					fromLabel: 'From',
					toLabel: 'To',
					customRangeLabel: 'Custom',
					daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
					monthNames: [
						'January',
						'February',
						'March',
						'April',
						'May',
						'June',
						'July',
						'August',
						'September',
						'October',
						'November',
						'December'
					],
					firstDay: 1
				}
			},
			function(start, end, label) {
				// console.log(start.toISOString(), end.toISOString(), label);
				$('#daterange').html(
					start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD')
				);
				self.search();
			}
		);

		// this.search();
	}
};
</script>
